<template>
  <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="120px"
      :disabled="lookView"
    >
      <div slot="header" class="clearfix">
        <span>{{ $t("basic_information") }}</span>
      </div>
      <el-form-item :label="$t('position_name')" prop="positionName">
        <el-input
          v-model="form.positionName"
          :placeholder="$t('please_enter', { name: $t('position_name') })"
          :show-word-limit="true"
        />
      </el-form-item>
      <el-form-item :label="$t('position_code')" prop="positionCode">
        <el-input
          v-model="form.positionCode"
          :placeholder="$t('please_enter', { name: $t('position_code') })"
          :show-word-limit="true"
        />
      </el-form-item>
      <el-form-item :label="$t('ranking_description')" prop="remark">
        <el-input
          v-model="form.remark"
          type="textarea"
          :placeholder="$t('please_enter', { name: $t('ranking_description') })"
          :show-word-limit="true"
        />
      </el-form-item>

      <el-table ref="multipleTable" v-loading="loading" :data="form.rankVOList" border :max-height="tableHeight">
        <el-table-column
          :label="$t('ranking')"
          align="center"
          prop="rankName"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          :label="$t('action')"
          align="center"
          class-name="small-padding fixed-width"
          v-if="!lookView"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleUp(scope.$index)"
              :disabled="scope.$index == 0"
              >{{ $t("move_up") }}</el-button
            >
            <el-button
              size="mini"
              type="text"
              @click="handleDown(scope.$index)"
              :disabled="scope.$index == form.rankVOList.length - 1"
              >{{ $t("move_down") }}</el-button
            >
            <el-button
              size="mini"
              type="text"
              @click="handleDelete(scope.row, scope.$index)"
              >{{ $t("delete") }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="zhi" @click="handleAdds" v-if="!lookView">
        <i class="el-icon-plus"></i>
        <span>{{ $t("add_new_position") }}</span>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer" v-if="!lookView">
      <el-button type="primary" @click="submitForm('form')">{{
        $t("confirm")
      }}</el-button>
      <el-button @click="cancel">{{ $t("cancel") }}</el-button>
    </div>

    <AddPosition ref="adds" @handleSuccess="handleSuccess"></AddPosition>
  </el-dialog>
</template>

<script>
import {
  systemPositionAdd,
  systemPositionUpdata,
} from "@/api/custom/employerList";
import AddPosition from "./addPosition.vue";
export default {
  components: {
    AddPosition,
  },
  data() {
    return {
      loading: false,
      title: "",
      open: false,
      form: {
        rankVOList: [],
        positionCode: "",
        positionName: "",
        remark: "",
      },
      rules: {
        positionName: [
          {
            required: true,
            message: this.$t("cannot_empty", {
              name: this.$t("position_name"),
            }),
            trigger: "blur",
          },
        ],
        positionCode: [
          {
            required: true,
            message: this.$t("cannot_empty", {
              name: this.$t("position_code"),
            }),
            trigger: "blur",
          },
        ],
      },
      lookView: false,
    };
  },
  created() {},
  methods: {
    reset() {
      this.form = {
        rankVOList: [],
        positionCode: "",
        positionName: "",
        remark: "",
      };
      this.lookView = false;
      this.resetForm("form");
    },
    handleSuccess(e) {
      if (!this.form["rankVOList"]) {
        this.$set(this.form, "rankVOList", []);
      }
      this.form["rankVOList"].push(e);
    },
    submitForm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          if (this.form.rankVOList && this.form.rankVOList.length) {
            if (this.title == this.$t("add")) {
              systemPositionAdd(this.form).then((res) => {
                this.$modal.msgSuccess(this.$t("operation_successful"));
                this.$emit("handleSuccesses");
                this.open = false;
              });
            }
            if (this.title == this.$t("edit")) {
              console.log(this.form);
              systemPositionUpdata(this.form).then((res) => {
                this.$modal.msgSuccess(this.$t("operation_successful"));
                this.$emit("handleSuccesses");
                this.open = false;
              });
            }
          } else {
            this.$modal.msgWarning(this.$t("please_new_position"));
            return;
          }
        } else {
          return false;
        }
      });
    },
    cancel() {
      this.open = false;
    },
    showDateschedule(detailParams) {
      this.reset();
      this.open = true;
      this.title = detailParams.title;
      this.$set(detailParams.item, "rankVOList", detailParams.item.rankDTOList || []);
      if (detailParams.title == this.$t("view")) {
        this.lookView = detailParams.lookView;
        this.form = detailParams.item;
      }
      if (detailParams.title == this.$t("edit")) {
        this.form = detailParams.item;
      }
    },
    // /** 删除按钮操作 */
    handleDelete(row, index) {
      this.$modal
        .confirm(this.$t("delete_data"))
        .then(() => {
          this.form.rankVOList.splice(index, 1);
          this.$modal.msgSuccess(this.$t("operation_successful"));
        })
        .catch(() => {});
    },

    // 互换位置
    swapArray(arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
      return arr;
    },
    // 上移
    handleUp(index) {
      this.swapArray(this.form.rankVOList, index, index - 1);
    },
    // 下移
    handleDown(index) {
      this.swapArray(this.form.rankVOList, index, index + 1);
    },

    handleAdds() {
      this.$refs.adds.handleAddPosition();
    },
  },
};
</script>
<style lang="scss" scoped>
.zhi {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border: 2px dashed #cccccc;
  margin: 20px auto;
  cursor: pointer;
}
</style>
